<template>
  <app-navigator defaultPath="normal/button" ref="navigator">
    <article class="app-home">
      <section class="app-header">
        <span @click="goHome">v3-component</span>
      </section>
      <section class="app-menu">
        <app-menu></app-menu>
      </section>
      <section class="app-content">
        <app-navigator-page></app-navigator-page>
      </section>
    </article>
  </app-navigator>
</template>

<script lang='ts'>
    import { AppNavigator } from "./components/navigator/app-navigator";
    import { AppNavigatorPage } from "./components/navigator/app-navigator-page";
    import AppMenu from "./components/app/app-menu.vue";
    import { defineComponent } from "vue";
    export default defineComponent({
        name: "app",
        components: {
            AppNavigator,
            AppNavigatorPage,
            AppMenu
        },
        methods: {
            goHome() {
                console.log('goHome', this.$refs.navigator);
                (this.$refs.navigator as any).$._refer.methods.go('home')
            }
        }
    });
</script>
<style lang="scss">
$headSize: 60px;
$menuSize: 300px;
.app-home {
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: $headSize;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    padding: 0 40px;
    color: #42b983;
  }
  .app-menu {
    position: fixed;
    top: $headSize;
    left: 0;
    bottom: 0;
    width: $menuSize;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #ccc;
  }
  .app-content {
    padding-top: $headSize + 20px;
    padding-left: $menuSize + 20px;
    box-sizing: border-box;
  }
}
</style>